<template>
  <div class="meau">
    <searchInput></searchInput>
    <div class="meau-main">
      <div class="tab-1">
        <img src="https://m.wowdsgn.com/static/img/furniture.png" alt="">
        <ul>
          <li @click="tolist(item)" class="meauitem" v-for="item in tablist1" :key="item.id">{{item.text}}
            <i class="right"><van-icon name="arrow" size="20"/></i>
          </li>
        </ul>
      </div>
      <div class="tab-1">
        <img src="https://m.wowdsgn.com/static/img/household.png" alt="">
        <ul>
          <li @click="tolist(item)" class="meauitem" v-for="item in tablist2" :key="item.id">{{item.text}}
            <i class="right"><van-icon name="arrow" size="20"/></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import searchInput from '@/components/searchInput'
import Vue from 'vue'
import { Icon } from 'vant'
import { mapState } from 'vuex'

Vue.use(Icon)
export default {
  data () {
    return {
      tablist1: [],
      tablist2: []
    }
  },
  components: {
    searchInput
  },
  mounted () {
    this.tablist1 = this.meauitem1
    this.tablist2 = this.meauitem2
  },
  computed: {
    ...mapState('meaulist', ['meauitem1', 'meauitem2'])
  },
  methods: {
    tolist (item) {
      this.$router.push('/meau/' + item.id)
    }
  }
}
</script>

<style lang="scss">
  .meau{
    padding: 0 10px;
    .meau-main{
      position: relative;
      margin: 0rem auto 0;
      background: #fff;
      padding: 0px 5px  50px;
      .tab-1{
        padding-top: 10px
      }
      img{
        width: 100%;
      }
      .meauitem{
        height: 49px;
        line-height: 49px;
        font-size:15px;
        color: #000;
        border-bottom: 1px solid #eaeaea;
        text-indent: 15px;
        .right{
          float: right;
          color: #ccc
        }
      }
    }
  }
</style>
